<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:200px;height:200px;font-size:50px;line-height:200px;border: solid 1px black;margin: 0 auto;text-align: center;}
        #btn{display: block;margin: 20px auto;width:120px;height:40px;font-size: 20px;}
    </style>
</head>
<body>
    <div class="box">30</div>
    <input type="button" id="btn" value="开始">
</body>
<script>

    // 第一次点击按钮，开始倒计时
    // 再点一次按钮，倒计时暂停
    // 倒计时到终点后，点击按钮，复位

    // 1. 选择器
    var box = document.querySelector(".box");
    var btn = document.querySelector("#btn");

    var t = null;
    // 8. 为了让复位功能能拿到初始值，提前存储
    var origin = box.innerText;

    // 3. 准备按钮的下一个功能状态：开始0，暂停1，复位2
    var flag = 0;
    // 2. 绑定事件
    btn.onclick = function(){
        // 4. 根据不同的状态执行不同的功能
        if(flag === 0){
            // 开始功能
            clearInterval(t);
            var that = this;
            // 5. 开启计时器
            t = setInterval(function(){
                // 6. 判断要倒计时的数字是否到终点
                if(box.innerText == 1){
                    // 清除计时器
                    clearInterval(t);
                    // 显示结束语
                    box.innerHTML = "结束了";
                    // 倒计时功能执行完毕，将状态切为下一个：复位状态
                    flag = 2;
                    that.value = "复位";
                }else{
                    // 7. 正常--
                    box.innerText--;
                }
            }, 1000);
            // 开始功能执行完毕，将状态切为下一个：暂停状态
            flag = 1;
            this.value = "暂停";
        }else if(flag === 1){
            // 暂停功能
            clearInterval(t);
            // 暂停功能执行完毕，将状态切为下一个：开始状态
            flag = 0;
            this.value = "继续";
        }else if(flag === 2){
            // 复位功能
            // 9. 将倒计时的数字设置为初始值
            box.innerText = origin;
            // 复位功能执行完毕，将状态切为下一个：开始状态
            flag = 0;
            this.value = "开始";
        }
    }

    

</script>
</html>